<template>
  <!-- 操作记录 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="请求路径:" prop="path" label-width="75px">
            <el-select v-model="listQuery.path" clearable filterable placeholder="请选择请求路径">
              <el-option :label="item.path" :value="item.path" v-for="(item, index) in pathDataList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间:" prop="dateTime" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="datetimerange" range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" class="full-width-input time-box" 
            :default-time="['00:00:00', '23:59:59']" clearable></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <!-- <el-table-column prop="id" label="ID" align="center" width="80"/> -->
          <el-table-column prop="path" label="请求地址" align="center" show-overflow-tooltip/>
          <el-table-column prop="ip" label="请求IP" align="center" width="200" />
          <el-table-column prop="method" label="请求方法" align="center" width="120" />
          <el-table-column prop="param" label="请求参数" align="center" show-overflow-tooltip tooltip-effect="light" />
          <el-table-column prop="resp" label="返回参数" align="center" show-overflow-tooltip tooltip-effect="light" />
          <el-table-column prop="latency" label="响应时间(毫秒)" align="center" width="120" />
          <el-table-column prop="admin_id" label="操作人" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ $public.accountLabel(scope.row.user_id) }}<span v-show="scope.row.user_id">【{{scope.row.user_id}}】</span></span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="操作时间" align="center" width="180"></el-table-column>
        </template>
        <template v-slot:footer>
          <pagination  :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getRecord,
  apiList
} from '@/api/system'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'record',
  components: {
    SearchTable
  },
  data () {
    return {
      isShowDetails: false,
      checkedItem: null,
      listLoading: true,
      dataList: [],
      listQuery: {
        page: 1,
        size: 50,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        path: '',
      },
      currentTotal: 0,
      pathDataList: [],
    }
  },
  created () {
    // this.getDataList();
    // this.getApiList()
  },
  activated () {
    this.getDataList();
    this.getApiList()
  },
  methods: {
    // 查询
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = null;
      that.listLoading = true;
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await getRecord(params)
      if (response.code==1) {
        if (response.data.list) {
          that.currentTotal = response.data.total
          that.dataList = response.data.list
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 插叙api路径
    getApiList () {
      let that = this;
      that.pathDataList = [];
      apiList(that.listQuery).then(function (res) {
        if (res.data) {
          that.pathDataList = res.data.list
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        path: '',
      }
      this.getDataList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
